import { Button, Card, Layout, message, Steps } from "antd";
import React from "react";
import BaseInfo from "./baseInfo";
import AuthManage from "./authManage";
import ResourceLimitation from "./resourceLimitation";
import Charging from "./charging";
import { doAddTenant } from "@/services/tenantManagement";
import ExpenseBill from "../ChargingManage/expenseBill";

class TenantAdd extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      steps:[
        {
          title:"基础信息",
          status:"process",
          disabled:false,
          value:{},
          componentRef:"BaseInfo"
        },
        {
          title:"授权管理",
          status:"wait",
          disabled:false,
          value:{},
          componentRef:"AuthManage"
        },
        {
          title:"资源限制",
          status:"wait",
          disabled:false,
          value:{},
          componentRef:"ResourceLimitation"
        },
      ],
      current:0,
      tenantId:"",
      
    }
  }

  componentDidMount(){
    const { location:{query} } = this.props;
    const { steps } = this.state;
    if(query && query.tenantId){
      steps.push({
        title:"账单信息",
        status:"bill",
        disabled:false,
        value:{},
        componentRef:"ExpenseBill"
      })
      this.setState({tenantId:query.tenantId,steps},() => {
        this.doChildrenFunc('getDetail')
      })
    }else{
      this.AuthManage.initData()
      this.ResourceLimitation.initData()
    }
  }

  setFormData = (info) => {
    console.log(info);
    let steps = this.state.steps
    steps[info.step].value = info.value
    this.setState({steps,current:info.nextStep == 3 ? 2 : info.nextStep},() => {
      if(info.nextStep == 3){
        this.doSave()
      }
      if(info.nextStep == 2){
        this.ResourceLimitation.getPackageDetail(steps[0].value.packageId)
      }
    })
    
  }

  doNext = () => {
    const { current } = this.state;
    this.doChildrenFunc('checkFormData')
  }

  doPrev = () => {
    let current = this.state.current - 1
    this.setState({current})
  }

  doSave = async () => {
    const { steps } = this.state;
    let obj  = {}
    for(const item of steps){
      obj = {...obj,...item.value}
    }
    const res = await doAddTenant(obj)
    console.log(res);
    if(res.code == -1){}else{
      message.info(res.message)
      this.doBack()
    }
    
  }

  doBack = () => {
    this.props.history.push({pathname:"/enterprise/tenantManagement"})
  }

  onChangeSteps = current => {
    if(this.state.tenantId){
      this.setState({current},() => {
        this.doChildrenFunc('getDetail')
      })
    }
  }

  doChildrenFunc = (func,params) => {
    const { steps,current,tenantId } = this.state;
    const componentRef = steps[current].componentRef
    this[componentRef][func](tenantId,params)
  }
  

  render(){
    const { current,steps,tenantId } = this.state;
    
    return (
      <Card bordered={false} style={{height:'calc(100vh - 90px)'}} bodyStyle={{height:"100%"}}>
        <Layout style={{height:'100%',width:'100%'}}>
          <Layout.Header style={{background:"#ffffff",padding:0,height:40}}>
            <Steps current={current} onChange={this.onChangeSteps}>
              {
                steps.map(item => (
                  <Steps.Step title={item.title} disabled={item.disabled} key={item.title} />
                ))
              }
            </Steps>
          </Layout.Header>
          <Layout.Content style={{background:"#ffffff",padding:0,overflowY:"auto"}}>
            <BaseInfo tenantId={tenantId} onRef={ref => this.BaseInfo = ref} setFormData={this.setFormData} current={current} />
            <AuthManage tenantId={tenantId} onRef={ref => this.AuthManage = ref} setFormData={this.setFormData} current={current}  />
            <ResourceLimitation tenantId={tenantId} onRef={ref => this.ResourceLimitation = ref} setFormData={this.setFormData} current={current} />
            <ExpenseBill tenantId={tenantId} onRef={ref => this.ExpenseBill = ref} setFormData={this.setFormData} step={current}   />
          </Layout.Content>
          <Layout.Footer style={{background:"#ffffff",padding:0,height:35}}>
            {
              current == 3 ? '' :
              tenantId ? (
                <div>
                  <Button style={{marginRight:10}} onClick={this.doBack}>取消</Button>
                  <Button type="primary" onClick={this.doNext}>保存</Button>
                </div>
              ) : (
                <div>
                  {
                    current != 0 ? (
                      <Button style={{marginRight:10}} onClick={this.doPrev}>上一步</Button>
                    ) : <Button style={{marginRight:10}} onClick={this.doBack}>取消</Button>
                  }
                  {
                    current == 2 ? (
                      <Button type="primary" onClick={this.doNext}>保存</Button>
                    ) : <Button type="primary" onClick={this.doNext}>下一步</Button>
                  }
                </div>
              )
            }
          </Layout.Footer>
        </Layout>

      </Card>
    )
  }
}

export default TenantAdd